<template>
  <div>
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"/>
    <div id="contentBody" class="contentBody">
      <div id="resultList">
        <van-list  @load="searchDataList">
          <van-cell v-for="cminfo in dataList" :key="cminfo.recodeId"
                    :id="cminfo.recodeId" @click="showDetailInfo(cminfo)">
            <div>
              <table>
                <tr>
                  <td class="leftside wordcs">{{cminfo.accountNo | account}}</td>
                  <td class="rightside status">
                    <div :class="{'DD':cminfo.type === '001','TD':cminfo.type === '002'}">
                      {{cminfo.typeDesc}}
                    </div>
                  </td>
                  <td rowspan="2" style="width: 7%; text-align: right">
                    <van-icon name="arrow" />
                  </td>
                </tr>
                <tr>
                  <td class="amt">{{cminfo.amt | currency }}</td>
                  <td class="rightside">{{cminfo.tranDate}}</td>
                </tr>
              </table>
            </div>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import {
  List,
  Cell,
  Tag,
  NavBar
} from 'vant';

export default {
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [NavBar.name]: NavBar,
  },
  data() {
    return {
      title: '',
      backIcon: require('../../assets/img/tabbar/home_se@2x.png'),
      activeName: 'apply',
      dataList: [],
      parentParm: {},
    };
  },
  methods: {
    onItemClick(name, title) {
      console.log(name);
      console.log(title);
      this.searchDataList();
    },
    searchDataList() {
      for (let i = 0; i < 3; i += 1) {
        const itemInfo = {};
        itemInfo.accountNo = '63232145646516565';
        if (i === 0) {
          itemInfo.type = '001';
          itemInfo.typeDesc = '对公活期';
        } else {
          itemInfo.type = '002';
          itemInfo.typeDesc = '对公定期';
        }
        itemInfo.amt = '5124000';
        itemInfo.tranDate = '2020-07';
        itemInfo.curr = 'CNY';
        itemInfo.statue = i;
        this.dataList.push(itemInfo);
      }
      console.log(this.dataList);
    },
    showDetailInfo(obj) {
      console.log(obj);
      if (this.$store.state.yqdzTitle) {
        this.$router.push({ name: 'BillInfoEdit', params: { title: this.title, item: obj } });
      } else {
        this.$router.push({ name: 'BillInfoShow', params: { title: this.title, item: obj } });
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  mounted() {
    //  this.getJobInfo();
  },
  created() {
    if (this.$store.state.yqdzTitle) {
      this.title = '未完成对账';
    } else {
      this.title = '已完成对账';
    }
    this.parentParm = this.$route.params;
  },
};
</script>

<style scoped>
  .contentBody{
    background-color: #f3f6f9;
    overflow-y:scroll;
    padding-top: 10PX;
  }
  .contentBody table {
    width: 100%;
  }
  .leftside{
    width: 70%;
  }
  .rightside{
    text-align: right;
  }
  .wordcs{
    color: #333333;
    font-size: 20PX;
  }
  .amt{
    color: #333333;
    font-size: 18PX;
  }
  .DD{
    color: #24BD73;
    background-color: #E5F7EE;
    font-size: 9pt;
    width: 80PX;
    text-align: center;
    float: right;
  }
  .TD{
    color: #188DC1;
    background-color: #E3EFF6;
    font-size: 9pt;
    width: 80PX;
    text-align: center;
    float: right;
  }

</style>
